import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { List } from 'antd';
import './style.less';

const Components = () => {
  const data: string[] = ['markdown', 'tags', 'collections'];
  return (
    <main className="components">
      <List
        size="small"
        bordered
        dataSource={data}
        renderItem={item => (
          <List.Item>
            <Link to={`/${item}`}>{item}</Link>
          </List.Item>
        )}
      />
      <div className="content">
        <Outlet />
      </div>
    </main>
  );
};

export default Components;
